<template>
  <div class="clue-statistics">
    <ContentField>
      <template v-slot:header>
        线索统计页面
        <el-tooltip
          class="item"
          effect="dark"
          content="根据下方条件生成线索Excel表"
          placement="bottom"
        >
          <el-button
            type="primary"
            icon="el-icon-download"
            style="margin-right: 3%; width: 130px; float: right; padding: 7px"
            @click="generateClueExcel"
          >
            生成Excel
          </el-button>
        </el-tooltip>
      </template>
      <template v-slot:body>
        <el-divider content-position="left">条件选择</el-divider>
        <div>
          <div
            class="searchConditionArea"
            style="margin-top: 0px; text-align: center"
          >
            <el-select
              v-model="condition.year"
              filterable
              placeholder="请选择年份"
              class="searchConditionArea-select"
            >
              <el-option
                v-for="year in years"
                :key="year.value"
                :label="year.label"
                :value="year.value"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="condition.pid"
              filterable
              placeholder="请选择省份"
              @change="getCitiesByPid"
              style="margin-left: 20px"
              class="searchConditionArea-select"
            >
              <el-option
                v-for="province in provinces"
                :key="province.id"
                :label="province.name"
                :value="province.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="condition.cid"
              filterable
              placeholder="请选择城市"
              @change="selectSchoolsByCid"
              style="margin-left: 20px"
              class="searchConditionArea-select"
            >
              <el-option
                v-for="city in cities"
                :key="city.id"
                :label="city.name"
                :value="city.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="condition.sid"
              filterable
              placeholder="请选择学校"
              style="margin-left: 20px"
              @change="$forceUpdate()"
              class="searchConditionArea-select"
            >
              <el-option
                v-for="shcool in schools"
                :key="shcool.id"
                :label="shcool.name"
                :value="shcool.id"
              >
              </el-option>
            </el-select>
            <el-button
              type="primary"
              icon="el-icon-search"
              style="margin-left: 20px; width: 10%"
              @click="generateClueStatistic"
            >
              搜索
            </el-button>
          </div>
        </div>
        <el-divider></el-divider>
        <div>
          <el-table
            :data="clueStatistics"
            :span-method="objectSpanMethod"
            height="250"
            border
            style="width: 100%"
          >
            <el-table-column prop="pname" label="区域" width="180">
            </el-table-column>
            <el-table-column prop="pallClueNum" label=""></el-table-column>
            <el-table-column prop="pnotNum" label=""></el-table-column>
            <el-table-column prop="prepNum" label=""></el-table-column>
            <el-table-column prop="username" label="用户名"> </el-table-column>
            <el-table-column prop="positionName" label="职位">
            </el-table-column>
            <el-table-column prop="uallClueNum" label="线索"> </el-table-column>
            <el-table-column prop="unotNum" label="通知书"> </el-table-column>
            <el-table-column prop="urepNum" label="报道"> </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="curPageNum"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="clueStatisticsLength"
            >
            </el-pagination>
          </div>
        </div>
      </template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "../../components/ContentField.vue";
export default {
  name: "ClueStatisticsView",
  components: {
    ContentField,
  },
  created() {
    this.getProvinces();
  },
  computed: {
    // 生成年份选项的，这里是从今年往前推50年
    years() {
      let years = [];
      for (let i = this.curYear - 50; i <= this.curYear; i++) {
        let obj = {};
        obj.label = i.toString();
        obj.value = i.toString();
        years.push(obj);
      }
      return years.reverse();
    },
  },
  methods: {
    searchClueByCondition() {},
    // 获取所有省份
    getProvinces() {
      let outer = this;
      this.$store.dispatch("getProvinces", {
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.provinces = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    // 选择省份后调用，查询省份下的学校
    getCitiesByPid(flag) {
      let outer = this;
      this.condition.cid = "";
      this.condition.sid = "";
      if (flag == 1) {
        this.condition.pid = this.curClue.pid;
      }
      this.$store.dispatch("getCitiesByPid", {
        pid: this.condition.pid,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.cities = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    // 选择城市后调用，查询城市对应的学校
    selectSchoolsByCid(flag) {
      let outer = this;
      this.condition.sid = "";
      if (flag == 1) {
        this.condition.cid = this.curClue.cid;
      }
      this.$store.dispatch("selectSchoolsByCid", {
        cid: this.condition.cid,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.schools = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    countAllReportedNotification() {
      let outer = this;
      this.$store.dispatch("statisticsByConditions", {
        condition: this.condition,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.allClueNum = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
      let condition1 = JSON.parse(JSON.stringify(this.condition));
      condition1.rFlag = 1;
      this.$store.dispatch("statisticsByConditions", {
        condition: condition1,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.reportedClueNum = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
      let condition2 = JSON.parse(JSON.stringify(this.condition));
      condition2.nFlag = 1;
      this.$store.dispatch("statisticsByConditions", {
        condition: condition2,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          outer.notificationClueNum = resp.data.data;
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    statisticsByConditions() {
      let outer = this;
      this.$store.dispatch("statisticsByConditions", {
        condition: this.condition,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          console.log(resp.data.data);
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    // 生成统计数据
    generateClueStatistic() {
      let outer = this;
      this.$store.dispatch("generateClueStatistic", {
        condition: {
          year: this.condition.year,
          pid: this.condition.pid,
          cid: this.condition.cid,
          sid: this.condition.sid,
          pageSize: this.pageSize,
          curPageNum: this.curPageNum,
        },
        token: this.$store.state.user.jwt_token,
        success(resp) {
          console.log(resp.data);
          if (resp.data.code == 200) {
            outer.clueStatistics = resp.data.data;
            outer.clueStatisticsLength = parseInt(resp.data.message);
          } else {
            outer.$message({
              type: "error",
              message: "请选择年份、省份后再搜索",
            });
          }
        },
        error(resp) {
          console.log(resp);
        },
      });
    },
    /*
通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，
里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。
该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 
也可以返回一个键名为rowspan和colspan的对象。
    */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const array = [0, 1, 2, 3];
      if (
        array.includes(columnIndex) &&
        this.clueStatistics[rowIndex].merged != true
      ) {
        const currentRow = this.clueStatistics[rowIndex];
        let rowspan = 1;
        for (let i = rowIndex + 1; i < this.clueStatistics.length; i++) {
          if (this.clueStatistics[i].pname !== currentRow.pname) {
            break;
          }
          rowspan++;
          this.clueStatistics[i].merged = true;
        }
        return [rowspan, 1];
      } else if (array.includes(columnIndex)) {
        return [0, 0];
      }
      return [1, 1];
    },
    // 处理每页数据展示量变化
    handleSizeChange(size) {
      let outer = this;
      this.pageSize = size;
    },
    // 处理页码变化
    handleCurrentChange(curPageNum) {
      let outer = this;
      this.curPageNum = curPageNum;
    },
    // 下载对应的excel
    generateClueExcel() {
      let outer = this;
      this.$store.dispatch("generateClueExcel", {
        condition: this.condition,
        token: this.$store.state.user.jwt_token,
        success(resp) {
          if (resp.request.status == 200) {
            outer.$message({
              type: "success",
              message: "生成excel文件成功",
            });
          } else {
            outer.$message({
              type: "success",
              message: "生成excel文件失败",
            });
          }
        },
        error() {
          outer.$message({
            type: "success",
            message: "生成excel文件失败",
          });
        },
      });
    },
  },

  data() {
    return {
      condition: {
        pid: "",
        cid: "",
        sid: "",
        year: "",
      },
      provinces: [],
      cities: [],
      schools: [],
      curYear: new Date().getFullYear(),
      allClueNum: "",
      reportedClueNum: "",
      notificationClueNum: "",
      tableData: [],
      clueStatistics: [],
      clueStatisticsLength: 0,
      curPageNum: 1,
      pageSize: 8,
      pageSizes: [3, 5, 8, 10, 15, 20],
    };
  },
};
</script>

<style scoped>
.searchConditionArea-select {
  width: 20%;
}

.pagination-container {
  display: flex;
  justify-content: center; /* 使用 flex 布局将内容水平居中 */
  align-items: center; /* 使用 flex 布局将内容垂直居中 */
}
</style>
